TypeScript 泛型使用1

刚开始使用 TypeScript 类型的时候，会整个项目全部是 interface，type 类型，特别是有很多重复声明，越写越繁琐，假设遇到项目紧急，最后索性一招 any 走天下，前面的定义的类型就大部分废弃掉了，痛定思痛，决定好好把泛型梳理下

1. typeof

在 JavaScript 中 typeof 获取变量的类型，如果是个 function 返回的是 function，但是在 TypeScript 中就不一样了

function testFn() {
	return {
  	id: 1,
    name: "王二"
  }
}
// JavaScript 中
console.log( typeof "HC") // string;
console.log(type of test) // function

// TypeScript 中
type M = typeof testFn; // () => {id: number, name: string}

这个时候 typeof 就是返回一个函数类型 () => {id: number, name: string} ，那这个时候，我们肯定是需要获取到函数返回数据的类型，也就是 {id: number, name: string}，这个就要借助 ReturnType 来使用了(后面也会仔细讲解 ReturnType 这个泛型)

type Result = typeof testFn;
const  res: ReturnType<Result> = testFn();

这个时候， res 的类型就是函数返回对象的那个类型了，vscode 截图如下：这就非常方便的获取函数返回类型了，那当然直接给函数指定一个返回类型更方便

2. key of

type User = {
  id: number;
  name: string;
};

type M = keyof User; // 'id' | 'name'
const test: M = "id";

key of 的含义是取出某个 object 的所有属性的联合类型，这样会方便拿到object 某个 key

好，现在有个实际场景出现了，需要用到这2种结合，由于历史原因，我们定义了如下的一个对象

const userConfig = {

  chinaUserConfig: {
    defaultLanguage: 'zh'
  },
  americaUserConfig: {
  },
  ///...userConfig
}

我们希望每个userConfig 的子属性都要包含 defaultLanguage 这个字段，可以结合上面的，给个如下定义

type language = typeof userConfig[keyof typeof userConfig]['defaultLanguage'];

这样就强制指定了必须包含 defaultLanguage 字段，americaUserConfig 没有就会报错，那当然，解决这个问题还有一些其他方法，比如：

3. extends 类型约束

extends 字面意思继承，常用在 Class 中继承方法，但也是可以作为一种类型约束的，在日常开发中，使用频率极高，比如我们个方法是需要获取高度

function getHeight<T>(arg: T) {
  // 会报 这个错 Property 'height' does not exist on type 'T'.
  console.log(arg.height);
}

但实际上，我们不知道参数是什么类型，只要这个参数有 height 这个属性就好了，这个时候 extend 做类型约束的威力就出来了

function getHeight<T extends {height: number}>(arg: T) {
  console.log(arg.height);
}

这样就不会报错了，我们通过对参数 arg 的类型 T 做了约束，必须包含 height 属性，这样我们就非常好的对参数做了类型约束，代码健壮性大大增强

4. infer 类型提取

强大的 infer 终于要登场了，infer一般用于类型提取，其作用类似于在类型运算的过程中声明了一个变量。考虑下面的例子

type User = {
  id: number;
  name: string;
};
type UserPromise = Promise<User>;

这个类型表示一个返回值类型为 User 的 Promise 类型。我们想把 Use r这个类型从这个已知的函数中提取出来，应当使用 infer 关键字：

type UnPromisify<T> = T extends Promise<infer V> ? V : never;
type InferedUser = UnPromisify<UserPromise>;
// { ind: number; name: string; }

考虑这个例子中的 UnPromisify 类型，这个类型接受一个泛型 T。接下来通过 extends 关键字进行判断，如果 T的类型形如 Promise<V>，那么就把这个 V提取出来。为了更好的理解 infer 的作用，在这个例子中，可以认为 infer 声明了一个变量 V。这个例子，我们结合 extedns 和 infer 实现了类型提取。

再看一个例子，DestructuredArgsOfFunction 是获取函数参数类型的类型”函数”，可以把 infer 看着是一个占位符变量

type FuncWithOneObjectArgument<P extends { [x: string]: any }, R> = (
  props: P
) => R;

type DestructuredArgsOfFunction<
  F extends FuncWithOneObjectArgument<any, any>
> = F extends FuncWithOneObjectArgument<infer P, any> ? P : never;

const myFunction = (props: { x: number; y: number }): string => {
  return "OK";
};

const props: DestructuredArgsOfFunction<typeof myFunction> = {
  x: 1,
  y: 2
};

在 TypeScript 中，默认提供了很多工具类型函数，官方介绍，其中 ReturnType<Type>，Parameters<T> 就是用 infer 实现的先看下 2 个工具函数的用法 ReturnType 例子

// ReturnType

declare function f1(): { a: number; b: string };

type T0 = ReturnType<() => string>;
//    ^ = type T0 = string
type T1 = ReturnType<(s: string) => void>;
//    ^ = type T1 = void
type T2 = ReturnType<<T>() => T>;
//    ^ = type T2 = unknown
type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
//    ^ = type T3 = number[]
type T4 = ReturnType<typeof f1>;
//    ^ = type T4 = {
//        a: number;
//        b: string;
//    }
type T5 = ReturnType<any>;
//    ^ = type T5 = any
type T6 = ReturnType<never>;
//    ^ = type T6 = never
type T7 = ReturnType<string>;

Parameters 例子

 // Parameters
  declare function f1(arg: { a: number; b: string }): void;

type T0 = Parameters<() => string>;
//    ^ = type T0 = []
type T1 = Parameters<(s: string) => void>;
//    ^ = type T1 = [s: string]
type T2 = Parameters<<T>(arg: T) => T>;
//    ^ = type T2 = [arg: unknown]
type T3 = Parameters<typeof f1>;
//    ^ = type T3 = [arg: {
//        a: number;
//        b: string;
//    }]
type T4 = Parameters<any>;
//    ^ = type T4 = unknown[]
type T5 = Parameters<never>;
//    ^ = type T5 = never
type T6 = Parameters<string>;

总得看下下来，ReturnType<type> 是获取函数返回类型，Parameters<type> 是返回函数参数类型，接下来，我们看下具体实现


type MyReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : never;
type MyParameters<T extends (...args: any) => any> = T extends (
  ...args: infer P
) => any
  ? P
  : never;

T extends (...args: any) => any 表示的 T 是个函数，MyReturnType 这里 infer R，就是标示函数返回值是类型 R，这样我们就取出了函数的返回类型，MyParameters 同理。

TypeScript 封装了很多常见的基于泛型类型工具，把常见的列举出来

5. `Partial<T>`

这个类型“函数”的作用，在于给定一个输入的 object 类型 T，返回一个新的 object 类型，这个 object 类型的每一个属性都是可选的。我们可以用基本的关键字来用自己的方式实现这个工具类型：

type MyPartial<T> = {
  [K in keyof T]?: T[K];
};
type PartialUser = MyPartial<User>;
// {name?: string, age?: number}
type TUserKeys = keyof User;
// 'name' | 'age'
type TName = User["name"];
// string
type TAge = User["age"];
// number
type TUserValue = User[TUserKeys];
// string | number

6. `Required<T>`

这个类型“函数”的作用是标记属性都是必须的，举个例子：

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 };
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Required 具体代码实现如下：


type MyRequired<T> = {
  [K in keyof T]-?: T[K];
};

7. `Readonly<T>`

转换成只读

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};

todo.title = "Hello";
// Cannot assign to 'title' because it is a read-only property.

// 具体实现
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

8. `Mutable<T>`

把ReadOnly 转换成可编辑，一般不会用这种写法，因为定义了readonly，又去改变，会很流氓

type MyMutable<T> = {  -readonly [K in keyof T]: T[K];};

interface User1 {
  readonly id: number;
  readonly name: string;
}
const user1: MyMutable<User1> = {
  id: 1,
  name: "test"
}
user1.id = 35

9. `Record<Keys,Type>`

Record 表示把 Type做成做key 对应值的类型，组成一个新的类型，这个非常实用，实际开发中，经常会遇到这种类型组装的问题，案例如下：

interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};
// 这里 nav 对应的类型就是一个重新组装的
nav.about;
// ^ = const nav: Record

对应实现如下：


type MyRecord<K extends keyof any, T> = {
  [P in K]: T;
};
type TKeyofAny = keyof any;
// string | number | symbol
type TKeys = "a" | "b" | 0;
type TKeysUser = MyRecord<TKeys, User>;
// {a: User, b: User, 0: User}

10. `Pick<Type, Keys>`

这个用的特别多，表示从一个类型里取出你需要用的类型，组成一个新类型，案例如下：

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

// 这里 todo类型就是 只有 title 和 completed 2个属性了
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

对应实现如下：


type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};
type TNameKey = "id";
type TUserName = MyPick<User, TNameKey>;
// {id: number}

11. `Exclude<Type, ExcludedUnion>、Extract<Type, Union>、NonNullable<Type>`

这 3 个比较像，放到一起

11.1. `Exclude<Type, ExcludedUnion>`

取排除 ExcludedUnion 的属性

type T0 = Exclude<"a" | "b" | "c", "a">;
//    ^ = type T0 = "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
//    ^ = type T1 = "c"
type T2 = Exclude<string | number | (() => void), Function>;
//    ^ = type T2 = string | number

11.2. `Extract<Type, Union>`

取 2 者相同的部分

type T0 = Extract<"a" | "b" | "c", "a" | "f">;
//    ^ = type T0 = "a"
type T1 = Extract<string | number | (() => void), Function>;
//    ^ = type T1 = () => void

11.3. `NonNullable<Type>`

取非 null，undefined 部分

type T0 = NonNullable<string | number | undefined>;
//    ^ = type T0 = string | number
type T1 = NonNullable<string[] | null | undefined>;
//    ^ = type T1 = string[]

11.4. 三者对应实现

type MyExclude<T, U> = T extends U ? never : T;
type MyExtract<T, U> = T extends U ? T : never;
type MyNonNullable<T> = T extends null | undefined ? never : T;

12. `Omit<Type, Keys>`

和 Pick 对应的，我们有时候一个类型属性非常多，我可能是想排除某几个属性，把剩下的组成一个新类型，就需要 Omit 了，案例如下：

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
// 排除掉  description 属性，留下其他的
type TodoPreview = Omit<Todo, "description">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

对应代码实现：

type MyOmit<T, K> = Pick<T, Exclude<keyof T, K>>;
type OmitUser = MyOmit<User, "age">;
// { name: string }

13. `ConstructorParameters<Type>`

取出构造函数的参数类型，构造函数也就是我们常看到的 new (…args: any) => any，要取到 args，案例如下：

 	class User {
    constructor(id: string, name: number) {}
  }
  type Params = ConstructorParameters<typeof User>
  // [id: number, name: string]

这样 Params 就就是 class User 参数类型了，我们在往前走一步，把 User 改成一个抽象类，这个时候就会报错因为抽象类是没有 new (…args: any) => any) 这属性的，这个时候改变下


abstract class User {
    constructor(id: number, name: string) {}
  }
type ConstructorHelper<T> = (new (...args: any) => any) & T;
type ContructorParameters<T> = ConstructorParameters<ConstructorHelper<T>>;
type Params2 = MyConstructorParameters<typeof User>;
// [id: number, name: string]

又可以愉快的玩耍了，所以 ConstructorParameters 的特点是记住需要有 new (…args: any) => any) 类型

14. `InstanceType<T>`

InstanceType<T>是表示构造函数的类型，也就是我们常说的 class 类型，案例如下：

class User {
    id: number;
    name: string;
    constructor(id: number, name: string) {}
    say() {

    }
 }
type Ins = InstanceType<typeof User>;
const mm: Ins = new User(1, '王二');

代码实现：


type MyInstanceType<T extends new (...args: any) => any> = T extends new (
  ...args: any
) => infer R
  ? R
  : any;

15. 其他

以下几个类型，平常基本没有到，列举出来，具体看文档

- ThisParameterType<Type>
- OmitThisParameter<Type>
- ThisType<Type>

1. typeof

2. key of

3. extends 类型约束

4. infer 类型提取

5. Partial<T>

6. Required<T>

7. Readonly<T>

8. Mutable<T>

9. Record<Keys,Type>

10. Pick<Type, Keys>

11. Exclude<Type, ExcludedUnion>、Extract<Type, Union>、NonNullable<Type>

11.1. Exclude<Type, ExcludedUnion>

11.2. Extract<Type, Union>

11.3. NonNullable<Type>